<#include "/admin/common/layout/__mainlayout.html"> <#assign pageCss>
<#assign pageBreadCrumbs>
	<li><a href="#">Other Pages</a></li>
	<li class="active">Grid页面</li>
</#assign>

<style>
/* styling the grid page's grid elements */
.center {
	text-align: center;
}

.center [class*="col-"] {
	margin-top: 2px;
	margin-bottom: 2px;
	position: relative;
	text-overflow: ellipsis;
}

.center [class*="col-"]  div {
	position: relative;
	z-index: 2;
	padding-top: 4px;
	padding-bottom: 4px;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.center [class*="col-"]  div span {
	position: relative;
	z-index: 2;
}

.center [class*="col-"] div:before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	border: 1px solid #DDD;
}

.center [class*="col-"] div:hover:before {
	background-color: #FCE6A6;
	border-color: #EFD27A;
}
</style>
</#assign> <@mainlayout pageCss=pageCss pageBreadCrumbs=pageBreadCrumbs currentMenu="otherPageFlag-gridFlag">
<!-- pageHeader BEGAIN-->
<div class="page-header">
	<h1>
		Grid <small> <i class="ace-icon fa fa-angle-double-right"></i>
			bootstrap grid sizing
		</small>
	</h1>
</div>
<!-- pageHeader END-->

<!-- pageContent BEGAIN -->
<div class="center">
	<div class="row">
		<div class="col-xs-12">
			<div>
				<span>.col-xs-12</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-1">
			<div>
				<span>.col-xs-1</span>
			</div>
		</div>

		<div class="col-xs-11">
			<div>
				<span>.col-xs-11</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-6 col-sm-2">
			<div>
				<span>.col-xs-6.col-sm-2</span>
			</div>
		</div>

		<div class="col-xs-6 col-sm-10">
			<div>
				<span>.col-xs-6.col-sm-10</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12 col-lg-6">
			<div>
				<span>.col-xs-12.col-lg-6</span>
			</div>
		</div>

		<div class="col-xs-12 col-lg-6">
			<div>
				<span>.col-xs-12.col-lg-6</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-4">
			<div>
				<span>.col-xs-4</span>
			</div>
		</div>

		<div class="col-xs-8">
			<div>
				<span>.col-xs-8</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-5">
			<div>
				<span>.col-xs-5</span>
			</div>
		</div>

		<div class="col-xs-7">
			<div>
				<span>.col-xs-7</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-6">
			<div>
				<span>.col-xs-6</span>
			</div>
		</div>

		<div class="col-xs-6">
			<div>
				<span>.col-xs-6</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-7">
			<div>
				<span>.col-xs-7</span>
			</div>
		</div>

		<div class="col-xs-5">
			<div>
				<span>.col-xs-5</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-8">
			<div>
				<span>.col-xs-8</span>
			</div>
		</div>

		<div class="col-xs-4">
			<div>
				<span>.col-xs-4</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-9">
			<div>
				<span>.col-xs-9</span>
			</div>
		</div>

		<div class="col-xs-3">
			<div>
				<span>.col-xs-3</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-10">
			<div>
				<span>.col-xs-10</span>
			</div>
		</div>

		<div class="col-xs-2">
			<div>
				<span>.col-xs-2</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-11">
			<div>
				<span>.col-xs-11</span>
			</div>
		</div>

		<div class="col-xs-1">
			<div>
				<span>.col-xs-1</span>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<div>
				<span>.col-xs-12</span>
			</div>
		</div>
	</div>
</div>
<!-- pageContent END -->
</@mainlayout>
